<template>
  <section>
    <el-row style="margin-bottom: 10px">
      <el-col :span="10">
        <el-input size="mini" v-model="searchKey" placeholder="输入关键字" @keydown.native.prevent.enter="searchMallGoodsBtn(searchKey)"></el-input>
      </el-col>
      <el-col :span="5" style="margin-left: 10px">
        <i class="el-icon-search" @click="searchMallGoodsBtn(searchKey)"/>
      </el-col>
    </el-row>
    <el-checkbox-group v-model="checkedGoods" >
      <el-checkbox v-for="goods in mallGoodsList" :label="goods.id" :key="goods.id" @change="selMallGoodsEvent(goods.id,$event)">{{goods.title}}</el-checkbox>
    </el-checkbox-group>
    <el-pagination v-show="totalPage>0" style="margin-top:10px;" small
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
    <!--<el-button size="mini" @click="confirmSelMallGoodsBtn" type="success">确定</el-button>-->
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "mallGoods",
    props:['value'],
    data() {
      return {
        searchKey:null,
        mallGoodsList:null,
        checkedGoods:[],
        totalPage:0
      }
    },
    created(){
      console.log('—————单选商品处—————————',this.value)
      this.checkedGoods=this.value
      this.getMallGoodsList()
    },
    watch:{
      value(nv,ov){
        console.log('商品处——watch——————',nv)
      }
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      searchMallGoodsBtn(key){
        console.log(key)
        this.getMallGoodsList('',key)
      },
      goPage(val){
        this.getMallGoodsList(val-1,this.searchKey?this.searchKey:'')
      },
      getMallGoodsList(pageNo,key){
        console.log(key)
        //加载商品列表
        this.fetch({name:"getMallGoodsList",data:{page:pageNo?pageNo:0,storeId:this.department.id,key:key?key:''}})
          .then(res=>{
            console.log(res)
            this.mallGoodsList=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      selMallGoodsEvent(goods,e){
        console.log('选择之后的value————————————',this.value)
        console.log('选择之后的checkedGoods————————————',this.checkedGoods)
        if(e){
          this.value.push(goods)
        }else {
          for(let i=0;i<this.value.length;i++){
            let tmp=this.value[i]
            if(tmp === goods){
              this.value.splice(i,1)
              i--
            }
          }
        }
        console.log('处理之后的value————————————',this.value)
      },
      // confirmSelMallGoodsBtn(){
      //   console.log(this.checkedGoods)
      //   this.$emit('confirm',this.checkedGoods)
      // }
    }
  }
</script>

<style scoped>

</style>
